<style>
    #App-uploader-body .imgwp{ float: left; width: 130px; height: 100px; overflow: hidden; text-align: center; margin-left: 10.5px; margin-bottom: 10.5px; border: 1px solid #F5F5F5; position: relative; cursor: pointer;}
    #App-uploader-body .cover{ width: 130px; height: 100px; position: absolute; left: 0px; top:0px; background:url('/public/static/dlc/img/choosed.png'); display: none;}
    #App-uploader-body .imgwp:hover{border: 1px solid #ED4E2A;}
    #App-uploader-body .imgwp img{width: 100%; height: 100%; vertical-align: middle;}
    #App-uploader-body .group{ position: absolute; right: 0px; top: 0px;}
    #App-uploader-getmore{}
    video::-webkit-media-controls-time-remaining-display {display: block !important}
    video::-webkit-media-controls-current-time-display{display: block !important}
    video::-webkit-media-controls-timeline {display: block !important}
    video::-webkit-media-controls-mute-button {display: none; }
    video::-webkit-media-controls-fullscreen-button {
        display: none!important;
    }
</style>


<div id="App-uploader">
    <div id="App-uploader-header">
        <div class="hide">
            <iframe name='App-uploader-frame' id="App-uploader-frame"></iframe>
            <form enctype="multipart/form-data" action="{:url('Dlc/Upload/doupvideo')}" method="post" id="App-uploader-form" target="App-uploader-frame" >
                <input type="file" id="App-uploader-file" name="appfile[]" multiple accept="video/*">
            </form>
        </div>
        <div class="input-group input-group-sm" style="margin-bottom: 10px;">
            <input type="text" class="form-control" disabled value="" id="App-uploader-findback" placeholder="点击下方图片自动添加">
            <span class="input-group-btn">
                	<button class="btn btn-default shiny" type="button" id="App-uploader-delall"><i class="glyphicon glyphicon-trash"></i>删除视频</button>
                </span>
        </div>
        <div id="App-uploader-body" data-page = "2">
            {volist name="cache" id="vo"}
                <div class="imgwp" data-id = "{$vo.id}" data-check = "0" onclick="checkupload(this);">
                    <video src="http://{$_SERVER['HTTP_HOST']}/public{$vo.savepath}{$vo.savename}" controls="controls"  width="130" height="100" ></video>
                    <div class="cover"></div>
                </div>
            {/volist}
        </div>
        <div class="clear"></div>
        <div class="alert alert-success" style="margin-bottom: 0">
            <button id="App-uploader-getmore" class="btn btn-default"><i class="glyphicon glyphicon-refresh"></i>加载更多</button>
            <button id="App-uploader-start" class="btn btn-default"><i class="glyphicon glyphicon-search"></i>浏览</button>
            <i class="fa-fw fa fa-info"></i>
            <strong>提示：</strong> <span id="App-uploader-result">您还未选择任何视频.</span>
        </div>

    </div>

</div>
<script>
    var fbid="{$fbid}";
    // var isall=false;
    var isall="{$isall}"=="true"?true:false;
    var Jupfile=$("#App-uploader-file");
    var Jupresult=$("#App-uploader-result");
    var Jupstart=$("#App-uploader-start");
    var Jupform=$("#App-uploader-form");
    var Jupgetmore=$("#App-uploader-getmore");
    var Jupbody=$('#App-uploader-body');
    var Jupfindback=$('#App-uploader-findback');
    var Jupdelall=$('#App-uploader-delall');

    //上传后回调
    function doupimgcallback(info,upval) {
        if(upval){$.App.alert('success',info);$(Jupbody).empty().data('page',1);$(Jupgetmore).trigger('click');$(Jupfindback).val('');}else{$.App.alert('danger',info)};
        if(true){var cfile=$(Jupfile).clone().val("");$(Jupfile).remove();cfile.appendTo(Jupform);$(Jupresult).html('您还未选择任何视频.');}
    }
    //图片选择函数
    function checkupload(obj){
        var id=$(obj).data('id');
        var ischeck=$(obj).data('check');
        var cover=$(obj).find('.cover');
        if(!isall){
            var objs=$(Jupbody).find('.imgwp');
        }
        va=$(Jupfindback).val();
        if(!isall){
            //单图模式
            $(objs).each(function(){
                if($(this).data('check')==1){
                    $(this).data('check',0);
                    $(this).find('.cover').hide();
                }
            });
            $(Jupfindback).val(id);
            $(obj).data('check',1);
            $(cover).show();
        }else{

            //图集模式
            if(ischeck=='1'){
                $(obj).data('check',0);
                if (va.indexOf(','+id)>=0){
                    $(Jupfindback).val(va.replace(','+id,''));
                }else {
                    if (va.indexOf(id+',')>=0){
                        $(Jupfindback).val(va.replace(id+',',''));
                    }else {
                        $(Jupfindback).val(va.replace(id,''));
                    }
                }
                $(cover).hide();
            }else{
                $(obj).data('check',1);
                if (va==''){
                    $(Jupfindback).val(id);
                }else {
                    $(Jupfindback).val(va+','+id);
                }
                $(cover).show();
            }
        }

    }
    //上传变化
    $(Jupfile).on('change',function(){
        $(Jupstart).html('<i class="glyphicon glyphicon-upload"></i>上传');
        $(Jupresult).html('您有'+document.getElementById("App-uploader-file").files.length+'等待上传！');
    });
    //上传按钮
    $(Jupstart).on('click',function(){
        var len=document.getElementById("App-uploader-file").files.length;

        if(len){
            $(Jupresult).html('您有'+document.getElementById("App-uploader-file").files.length+'文件正在上传 <img src="/Public/Dlc/img/loading.gif" width="22" height="22" style="margin-top:-6px;">');
            $("#App-uploader-form").submit();
        }else{ $(Jupfile).trigger("click");}
        return false;
    });
    //加载更多
    $(Jupgetmore).on('click',function(){
        var p=$(Jupbody).data('page');
        var moreurl="{:url('/dlc/Upload/getmorevideo/')}";
        var more;
        $.ajax({
            type:"post",
            data:{'p':p},
            dataType: "json",
            url:moreurl,
            success:function(info){
                if(info){$(info).appendTo($(Jupbody));$(Jupbody).data('page',(p+1));}else{$.App.alert('success','没有视频了!请上传！');}
            },
            error:function(x){
                $.App.alert('dange','通讯失败！请重试！');
            }
        });
    });
    //删除图片
    $(Jupdelall).on('click',function(){
        var ids = $(Jupfindback).val();
        var delimgurl="{:url('Dlc/Upload/delvideos')}";

        $.ajax({
            type:"post",
            data:{'ids':ids},
            dataType: "json",
            url:delimgurl,
            success:function(info){

                if (info.status == 1) {
                    $.App.alert('success',info.msg);
                    $(Jupbody).empty().data('page',1);
                    $(Jupgetmore).trigger('click');
                    $(Jupfindback).val('');
                } else {
                    $.App.alert('dange',info.msg);
                }
            },
            error:function(x){
                $.App.alert('dange','通讯失败！请重试！');
            }
        });

    });

</script>